Created: 11/10/2018
By: demonisblack
Email: demonisblack@gmail.com
Thank you for purchasing my game. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Spot the Differences is a HTML5 game where two versions of the same picture are shown side by side and you must find the differences between the two pictures.
The ZIP package contains the game with 1280×768 resolution that scales to fit the whole screen device, but it may not be perfectly full screen.
To install the game just upload folder 'game' to your server. The game won't run locally with some browser like Chrome due to some security mode.
You need a website that runs PHP to make facebook share button work, and make sure to change Facebook Open Graph meta and Twitter meta in index.html, just replace [GAME_URL] to your game URL.
<!-- for Facebook -->
<meta property="og:image" content="[GAME_URL]/share.jpg" />
<meta property="og:url" content="[GAME_URL]" />
<!-- for Twitter -->
<meta name="twitter:image" content="[GAME_URL]/share.jpg" />
You can easily customize game text and settings in game.js file
var selectPuzzleCon = true; //enable select puzzles page
var circleHighlight = {color:'#fff', stroke:5}; //game circle highlight settings
var statusPuzzleComplete = 'COMPLETE'; //game status when complete
var statusPuzzleTimer = 'TIME\'S UP'; //game status when time's up
var resultTitle = 'GAME RESULT!'; //game result title
var resultDesc = 'BEST SCORE'; //game result description
var exitMessage = 'ARE YOUR SURE YOU\nWANT TO QUIT THE GAME?'; //go to main page message
//Social share, [SCORE] will replace with game score
var shareEnable = true; //toggle share
var shareText = 'SHARE THIS GAME'; //social share message
var shareTitle = 'My final score on Spot the Differences Game is [NUMBER].';//social share score title
var shareMessage = '[NUMBER] is mine new score on Spot the Differences Game! Try it now!'; //social share score message
If you wish to add/edit puzzles, check out Puzzles Settings section.
If you wish to add/edit puzzles with tools, check out Build-in Edit Tools section.
The sound can be easily disabled to avoid compatibility issues in sound.js file:
var enableMobileSound = true;
The mobile rotate instruction can be easily change in mobile.js file:
var rotateInstruction = true; //enable rotate instruction for mobile
var forPortrait=false; //for portrait only, set false for landscape mode
The page start with the loader wrapper that covering the whole screen in the body. It shows loader progress when calls the function initPreload()
<!-- PERCENT LOADER START-->
<div id="mainLoader"><img src="assets/loader.png" /><br><span>0</span></div>
<!-- PERCENT LOADER END-->
This section is for browser not support page when calls the function checkBrowser(). It shows error message when detect the browser does not support canvas.
<!-- BROWSER NOT SUPPORT START-->
<div id="notSupportHolder">
<div class="notSupport">YOUR BROWSER ISN'T SUPPORTED.<br/>PLEASE UPDATE YOUR BROWSER IN ORDER TO RUN THE GAME</div>
</div>
<!-- BROWSER NOT SUPPORT END-->
Device rotate instruction page when calls the function checkMobileOrientation(). It shows rotate instruction when device is in portrait view.
<!-- ROTATE INSTRUCTION START-->
<div id="rotateHolder">
<div class="mobileRotate">
<div class="rotateDesc">ROTATE YOUR DEVICE <br/>TO LANDSCAPE</div>
</div>
</div>
<!-- ROTATE INSTRUCTION END-->
Follow by one canvas tag in the body. The game start initiatie by calls the main function of the game initMain().
<!-- CANVAS START-->
<div id="canvasHolder">
<canvas id="gameCanvas" width="1280" height="768"></canvas>
</div>
<!-- CANVAS END-->
I'm using two CSS files in this game. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
The second file contains all of the specific stylings for the page.
This game using Javascript files below.
Complete game flow:
The most important functions used for page.
The most important functions used for game.
You can easily customize puzzles_arr in puzzles.js file
puzzles_arr array store all the puzzles, below is the explanation of each most important puzzles_arr array item:
var puzzles_arr = [{
thumbnail:'assets/puzzles/puzzle2_thumb.png',
image:'assets/puzzles/puzzle2.png',
timer:30000,
hidden:[{x:897, y:622, ratio:50}],
}];
This is the section where you can edit the puzzle with the tool by running edit.html. The page start with edit tools, click generate button to export the array when you complete editing, replace the new array in 'puzzles_arr' in puzzles.js.
The game contain 'design' folder which include following:
The folder 'assets' in 'game' folder contains all the images of the game that can be replaced. Is better to have the same size of the old ones if you want to reskin the game graphic without coding.
This game is build for Desktop browsers that support HTML5 canvas. Any mobile/tablet should work in landscape view, but they are not officially supported.
I've used the following font and sound files as listed.
Check out support policy here.
Once again, thank you so much for purchasing this game, if you have a more general question relating to the games on CodeCanyon, you might consider visiting the item page in the "Support" section.
If you like the game, please take a moment to rate it. Thanks! 




demonisblack